<script setup lang="ts">
defineProps<{
  title: string
  subtitle: string
}>()
</script>

<template>
  <div class="_rounded bg-[#f7f7f7] flow-root sm:grid sm:content-between">
    <div
      class="px-[5.58vw] pt-[6.51vw] sm:p-[3.12vw] sm:pb-0 lg:p-[clamp(1.125rem,-0.125rem+1.9531vw,1.75rem)] lg:pb-0"
    >
      <p class="text-lg lg:text-[clamp(1.125rem,0.375rem+1.1719vw,1.5rem)]">{{ title }}</p>
      <p
        class="text-base mt-[0.25rem] lg:text-[clamp(1rem,0.75rem+0.3906vw,1.125rem)] lg:mt-[clamp(0.25rem,-0.75rem+1.5625vw,0.75rem)]"
      >
        {{ subtitle }}
      </p>
    </div>

    <slot />
  </div>
</template>
